<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		//['2016-01-01',1908]
		function getData(year = 2017) {	//生成数据
			//year=year||'2017';

			/* var d=new Date(2008,7,0);
			console.log(d); */

			function getEndDay(year, month) {	//这个方法用来获取到某个月最后一天是几号，第二个参数是几月就传数字几
				return new Date(year, month, 0).getDate();
			}

			var data = [];
			var days;	//某个月的最后一天的日期值
			for (var i = 1; i <= 12; i++) {	//循环的是月份
				days = getEndDay(year, i);	//存储每个月的天数
				for (var j = 0; j < days; j++) {	//循环的是每月的天数
					data.push([year + '-' + i + '-' + (j + 1), Math.floor(Math.random() * 10000)]);
				}
			}

			return data;
		}
		//console.log(getData(2016));



		var mychart = echarts.init(document.getElementById('chart'));

		mychart.setOption({
			title: {
				text: '2016年某人每天的步数',
				left: 'center',
				top: 30,
				textStyle: {
					fontSize: 20,
				}
			},
			tooltip: {},
			visualMap: {
				type: 'piecewise',
				min: 0,
				max: 10000,
				orient: 'horizontal',
				left: 'center',
				top: 65,
				textStyle: {
					color: '#000',
					fontSize: 14
				}
			},
			series: {
				type: 'heatmap',
				coordinateSystem: 'calendar',
				data: getData(2016),
			},
			calendar: {
				top: 120,
				left: 100,
				right: 100,
				range: '2016-02',
				range: ['2016-01-02', '2017-02-23'],
				range: 2016,
				cellSize: 20,
				cellSize: [30, 40],
				/* cellSize: [40],
				cellSize: ['auto', 40] */
				orient: 'horizontal',
				splitLine: {
					show: true,
					lineStyle: {
						color: 'blue',
						width: 2,
						type: 'dotted',
					}
				},
				itemStyle: {
					color: 'green',
					borderColor: 'pink',
					borderWidth: 2,
				},
				dayLabel: {
					firstDay: 1,
					margin: 30,
					position: 'end',
					nameMap: ['S', '一', 'T', '三', '', '五', 'S'],
					nameMap: 'cn',
					color: 'teal',
					fontSize: 16,
				},
				monthLabel: {
					align: 'left',
					margin: 10,
					position: 'end',
					nameMap: 'cn',
					formatter: '{yyyy}-{MM}',
					formatter: function (param) {
						// ...
						return param.yyyy+' 年 '+param.M+' 月';
					}
				},
				yearLabel :{
					margin :40,
					position :'bottom',
					formatter :'{end}'
				}
			}
		});
	</script>
</body>

</html>